<template>
    <div class="mt-8">
      <h3 class="text-16 opacity-80 mb-2">上传风格图片</h3>
      <div class="flex flex-wrap gap-4 mt-4">
        <div
          v-for="(image, index) in styleImages"
          :key="image.id"
          class="relative w-[100px] h-[100px] border rounded overflow-hidden"
        >
          <n-image :src="image.url" width="100" height="100" object-fit="cover" />
          <n-button
            quaternary
            type="error"
            size="small"
            class="absolute top-0 right-0 z-10"
            @click.stop="removeImage(index)"
          >
            ✕
          </n-button>
        </div>
      </div>
  
      <n-upload
        :show-file-list="false"
        :custom-request="handleImageUpload"
        accept="image/*"
        multiple
      >
        <n-button dashed type="primary">选择图片上传</n-button>
      </n-upload>
    </div>
  </template>
  
  <script setup>
  const styleImages = ref([])
  
  const handleImageUpload = (options) => {
    // Your logic here
  }
  
  const removeImage = (index) => {
    // Your logic here
  }
  </script>
  